<!--
书籍卡片组件
参数说明:
- book: 书籍对象 (必需)
- showRanking: 是否显示排名 (可选, 默认false)
- ranking: 排名数字 (可选)
- showNewBadge: 是否显示新书标识 (可选, 默认false)
- isNew: 是否为新书 (可选, 默认false)
- cardStyle: 卡片样式 'default' | 'hot' | 'latest' (可选, 默认'default')
-->

<%
// 设置默认值
const cardStyle = locals.cardStyle || 'default'
const showRanking = locals.showRanking || false
const ranking = locals.ranking || 0
const showNewBadge = locals.showNewBadge || false
const isNew = locals.isNew || false
%>

<div class="bg-white rounded-lg transition-all duration-300 border border-gray-100 hover:border-gray-200 hover:shadow-lg overflow-hidden group">
    <div class="relative">
        <!-- 排名标识 (仅在热门页面显示) -->
        <% if (showRanking && ranking <= 3) { %>
            <div class="absolute top-2 left-2 z-20">
                <div class="bg-gradient-to-r from-red-500 to-orange-500 text-white text-xs font-bold px-2 py-1 rounded-full flex items-center">
                    <i class="fas fa-trophy mr-1"></i>
                    Top <%= ranking %>
                </div>
            </div>
        <% } %>

        <!-- 新书标识 (仅在最新页面显示) -->
        <% if (showNewBadge && isNew) { %>
            <div class="absolute top-2 right-2 z-20">
                <div class="bg-gradient-to-r from-blue-500 to-indigo-500 text-white text-xs font-bold px-2 py-1 rounded-full flex items-center">
                    <i class="fas fa-star mr-1"></i>
                    NEW
                </div>
            </div>
        <% } %>

        <div class="aspect-[3/4] relative overflow-hidden">
            <!-- 封面图片 -->
            <% if (book.cover_image) { %>
                <img src="<%= book.cover_image %>"
                     alt="<%= book.title %>"
                     class="w-full h-full object-cover <% if (cardStyle === 'hot') { %>group-hover:scale-105 transition-transform duration-300<% } else if (cardStyle === 'latest') { %>group-hover:scale-102 transition-transform duration-200<% } %>">
            <% } else { %>
                <div class="w-full h-full flex items-center justify-center bg-<% if (cardStyle === 'hot') { %>gradient-to-br from-gray-100 to-gray-200<% } else if (cardStyle === 'latest') { %>gradient-to-br from-blue-50 to-indigo-50<% } else { %>gray-100<% } %>">
                    <i class="fas fa-book text-<% if (cardStyle === 'latest') { %>blue-300<% } else { %>gray-300<% } %> text-2xl md:text-4xl opacity-50"></i>
                </div>
            <% } %>

            <!-- 桌面端悬停效果 -->
            <a href="/book/<%= book.username %>/<%= book.slug %>">
                <div class="hidden md:flex absolute inset-0 bg-gray-700 bg-opacity-80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex-col justify-center items-center text-center p-4 lg:p-6">
                    <div class="text-white font-bold text-sm mb-3 leading-tight">
                        <%= book.title %>
                    </div>
                    <div class="flex flex-col space-y-2 text-xs lg:text-sm text-gray-300">
                    <span class="flex items-center justify-center">
                        <i class="fas fa-user mr-1"></i>
                        <%= book.username || '匿名' %>
                    </span>
                        <span class="flex items-center justify-center">
                        <i class="fas fa-eye mr-1"></i>
                        <%= book.view_count || 0 %>
                    </span>
                    </div>
                </div>
            </a>

            <!-- 移动端直接点击 -->
            <a href="/book/<%= book.username %>/<%= book.slug %>" class="md:hidden absolute inset-0 z-10"></a>
        </div>

        <!-- 移动端信息展示 -->
        <div class="md:hidden p-3">
            <h3 class="text-sm font-medium text-gray-900 truncate mb-2">
                <%= book.title %>
            </h3>
            <div class="flex items-center justify-between text-xs text-gray-500">
                <span class="flex items-center truncate">
                    <i class="fas fa-user mr-1 text-blue-500"></i>
                    <%= book.username || '匿名' %>
                </span>
                <span class="flex items-center <% if (cardStyle === 'hot') { %>bg-red-50 text-red-600 px-2 py-1 rounded-full font-medium<% } else if (cardStyle === 'latest') { %>bg-blue-50 text-blue-600 px-2 py-1 rounded-full font-medium<% } %>">
                    <i class="fas fa-<% if (cardStyle === 'hot') { %>fire<% } else if (cardStyle === 'latest') { %>clock<% } else { %>eye<% } %> mr-1 <% if (cardStyle === 'hot') { %> <% } else if (cardStyle === 'latest') { %><% } else { %>text-green-500<% } %>"></i>
                    <%= book.view_count || 0 %>
                </span>
            </div>
        </div>
    </div>
</div>